<template>
  <div>
    <div class="div">
      <i class="el-icon-phone icon" @click="phoneWindow"></i>
      <div>
        更换手机
      </div>
    </div>
    <div class="div">
      <i class="el-icon-key icon" @click="passWindow" ></i>
      <div>
        修改密码
      </div>
    </div>
    <el-dialog
      title="输入原手机验证码"
      :visible.sync="dialogVisible1"
      width="50%"
      @close="handleClose">
      <el-input placeholder="请输入电话号码" clearable style="margin-top: 20px;margin-left: 20px; width: 60%;" v-model="admin.oldPhone">
        <template slot="prepend">手机号：</template>
      </el-input>
      <el-button @click="sendCode" :disabled="isSending || countdown > 0">
        {{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
      </el-button>
      <br>
      <el-input placeholder="请输入验证码" clearable style="margin-left: 20px; width: 60%;" v-model="admin.oldPhoneCode" @change="checkAdminUpdatePhone">
        <template slot="prepend">验证码：</template>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="bool" @click="toNext">下一步</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="输入新手机验证码"
      :visible.sync="dialogVisible2"
      width="50%"
      @close="handleClose">
      <el-input placeholder="请输入电话号码" clearable style="margin-top: 20px;margin-left: 20px; width: 60%;" v-model="adminInfo.newPhone">
        <template slot="prepend">新手机号：</template>
      </el-input>
      <el-button @click="sendNewCode" :disabled="newIsSending || newCountdown > 0">
        {{ newIsSending ? '发送中...' : newCountdown > 0 ? `${newCountdown}秒后重试` : '发送验证码' }}
      </el-button>
      <br>
      <el-input placeholder="请输入验证码" clearable style="margin-left: 20px; width: 60%;" v-model="adminInfo.newPhoneCode">
        <template slot="prepend">验证码：</template>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="updateAdminPass">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible3"
      width="50%"
      >
    <el-input placeholder="请输入旧密码" clearable style="margin-top: 20px;margin-left: 20px; width: 60%;" v-model="adminPass.oldPass" show-password>
      <template slot="prepend">旧密码：</template>
    </el-input>
     <el-input placeholder="请输新密码" clearable style="margin-top: 20px;margin-left: 20px; width: 60%;" v-model="adminPass.newPass" @change="checkPass" show-password>
       <template slot="prepend">新密码：</template>
     </el-input>
     <el-input placeholder="请输入新密码" clearable style="margin-top: 20px;margin-left: 20px; width: 60%;" v-model="okNewPass" @change="checkPass" show-password>
       <template slot="prepend">确认新密码：</template>
     </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="adminUpdatePass" :disabled="bool1" >确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  export default{
    name:"UpdateAdminPass",
    data(){
      return{
     dialogVisible1:false,
     dialogVisible2:false,
     dialogVisible3:false,
     admin:{},
     adminInfo:{},
     adminPass:{},
     okNewPass:"",
     isSending: false,
     newIsSending:false,
     countdown: 0,
     newCountdown:0,
     bool:true,
     bool1:true
      }
    },
    methods:{
      adminUpdatePass(){
      this.$http.post("/admin/adminAccount/adminUpdatePass",this.adminPass).then(resp=>{
        if(resp.data.code==200){
          this.$message({
                    message: '修改密码成功,请重新登录',
                    type: 'success'
                  });
         sessionStorage.clear()
         localStorage.clear()
         this.$router.push("/")
        }else{
           this.$message.error(resp.data.message);
        }
      })
      },
      checkPass(){
      if(this.adminPass.newPass==this.okNewPass){
        this.bool1=false
      }else{
        this.bool1=true
        if(this.adminPass.newPass&&this.okNewPass){
         this.$message.error("两次新密码不一致");
        }
      }
      },
      passWindow(){
      this.dialogVisible3=true
      },
      handleClose(){
      this.admin={},
      this.bool=true
      },
      updateAdminPass(){
        console.log(this.adminInfo)
       this.$http.post("/admin/adminAccount/adminUpdatePhone",this.adminInfo).then(resp=>{
         if(resp.data.code==200){
           this.$message({
                     message: '更换手机成功',
                     type: 'success'
                   });
         }else{
            this.$message.error(resp.data.message);
         }
         this.dialogVisible2=false
         this.admin={}
         this.bool=true
       })
      },
      sendNewCode(){
        if (this.newCountdown > 0 || this.newIsSending) {
          return;
        }
        this.newIsSending = true;
        this.newStartCountdown();
        setTimeout(() => {
          // 假设发送成功后将isSending重置为false
          this.newIsSending = false;
        }, 1000); // 这里使用2秒的延迟来模拟发送过程，你需要替换为实际的发送逻辑
        this.$http.get("/admin/adminAccount/sendAdminUpdateNewPhone",{
          params:{
            adminPhone:this.adminInfo.newPhone
          }
        }).then(resp=>{
          if(resp.data.code==200){
            this.$message({
                      message: '发送成功',
                      type: 'success'
                    });
          }else{
             this.$message.error(resp.data.message);
             this.newIsSending = false;
             this.newCountdown = 0;
          }
        })
      },
      toNext(){
      this.dialogVisible1=false,
       this.dialogVisible2=true
       console.log(this.adminInfo)
      },
    phoneWindow(){
    this.dialogVisible1=true
    },
    checkAdminUpdatePhone(){
     this.$http.get("admin/adminAccount/checkAdminUpdatePhone",{
       params:{
         adminPhone:this.admin.oldPhone,
         adminCode:this.admin.oldPhoneCode
       }
     }).then(resp=>{
       if(resp.data.code==200){
         this.bool=false
         this.adminInfo.oldPhone=this.admin.oldPhone
         this.adminInfo.oldPhoneCode=this.admin.oldPhoneCode
       }
     })
    },
    sendCode() {
      if (this.countdown > 0 || this.isSending) {
        return;
      }
      this.isSending = true;
      this.startCountdown();
      setTimeout(() => {
        // 假设发送成功后将isSending重置为false
        this.isSending = false;
      }, 1000); // 这里使用2秒的延迟来模拟发送过程，你需要替换为实际的发送逻辑
      this.$http.get("/admin/adminAccount/sendAdminUpdatePhone",{
        params:{
          adminPhone:this.admin.oldPhone
        }
      }).then(resp=>{
        if(resp.data.code==200){
          this.$message({
                    message: '发送成功',
                    type: 'success'
                  });
        }else{
           this.$message.error(resp.data.message);
        }
      })
    },
      startCountdown() {
            this.countdown = 60;
            const timer = setInterval(() => {
              this.countdown--;
              if (this.countdown <= 0) {
                clearInterval(timer);
              }
            }, 1000);
          },
    newStartCountdown() {
          this.newCountdown = 60;
          const newtimer = setInterval(() => {
            this.newCountdown--;
            if (this.newCountdown <= 0) {
              clearInterval(newtimer);
            }
          }, 1000);
        }
    }
  }
</script>

<style>
  .icon{
    font-size: 30px;
    margin-left: 15px;
  }
  .div{
    margin-top: 60px;
    margin-left: 120px;
  }
</style>
